<template>
	<view class="pa-24">
		<view v-for="(item, index) in treeNodeData" :key="index">
			<expandedNode
				:followTheme="props.followTheme"
				:fieldNames="props.fieldNames"
				:data="item"
				ref="expandedNodeRef"
				@text-click="emits('textClick', $event)"
			>
				<treeNode
					@text-click="textClick($event, item)"
					:followTheme="props.followTheme"
					:fieldNames="props.fieldNames"
					:data="item"
				></treeNode>
			</expandedNode>
		</view>
	</view>
</template>

<script lang="ts" setup>
import treeNode from './tree-node.vue'
import expandedNode from './expanded-node.vue'
import { inject, computed, getCurrentInstance, ref } from 'vue'
const expandedNodeRef = ref<InstanceType<typeof expandedNode> | null>(null)

const emits = defineEmits(['textClick'])
const props = defineProps({
	followTheme: {
		type: [Boolean, String],
		default: true
	},
	/**
	 * 数据
	 * @description 生成树结构的数据。结构必须要有id字段。当然可以通过field-names来映射，如果你的唯一标识字段不是Id的话。
	 */
	data: {
		type: Array,
		default: () => [],
		required: true
	},
	/**
	 * 数据结构字段的映射表。
	 */
	fieldNames: {
		type: Object,
		default: () => {
			return {
				id: 'id',
				text: 'text'
			}
		}
	}
})
const treeNodeData = computed(() => props.data)

function textClick(event: any, item: any) {
	emits('textClick', event)
	if (item && item['children']) {
		if (Array.isArray(expandedNodeRef.value)) {
			let el = expandedNodeRef.value.find((el) => el?.filedId == item[props.fieldNames.id])
			if (el) {
				el?.setStatus()
			}
		} else {
			expandedNodeRef.value?.setStatus()
		}
	}
}
</script>
